<template>
  <div style="padding: 10px">
    <img src="../assets/loding.gif" v-if="titles.length === 0">
    <ul v-else>
      <li v-for="title in titles" :key="title.id">
        <a href="javascript:;" @click="toDetail(title.id)">{{title.msg}}</a>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
  const titles = [
    {id:0,msg:"东三省限电"},
    {id:1,msg: "周冬雨过生日"},
    {id:2,msg: "尚硅谷上市了"},
  ]
  export default {
    name: "pages",
    data(){
      return {
        titles:[]
      }
    },
    methods:{
      toDetail(id){
        this.$router.push(`/home/message/${id}`)
      }
    },
    mounted() {
      //发送请求拿数据库中数据 修改data中的数据
      setTimeout(()=>{
        this.titles = titles
      },2000)
    }
  }
</script>

<style scoped>

</style>